<template> 
	<view class="wrapper">
		<view>
			<view class="bg-container">
				<image class="bg-image"  @tap="toChangeBg()" :src="worldBg"></image>
				<text class="username" @tap="toPersonInfo()">{{userInfo.nickname}}</text>
				<image class="avatar" :src="userInfo.avatar" @tap="toPersonInfo()"></image>
			</view>
			<view class="content">
				<view class="item" v-for="(blog,index) in blogs" :key="index">
					<view class="left">
						<image class="item-avatar" :src="blog.avatar" @tap="toOtherPage(blog.owner)"></image>
					</view>
					<view class="right">
						<view class="name" @tap="toOtherPage(blog.owner)">{{blog.name}}</view>
						<text class="text" v-show="blog.content!=''">{{blog.content}}</text>
						<view class="images" v-show="blog.images.length!=0">
							<image v-for="(url,i) in blog.images" :key="i" class="image-item" @tap="showPic(url,index)" :src="url"></image>
						</view>
						<view class="tip">
							<view class="time">{{showTime(blog.time)}}</view>
							<view class="options">
								<image class="icon-image" @tap="likeBlog(index)" :src="blog.likes.includes(user.id)||blog.likes.includes(user.id.toString())?'/static/icon/liked.png':'/static/icon/like.png'"></image>
								<image class="icon-image" @tap="commentBlog(index)" src="/static/icon/comment.png"></image>
							</view>
						</view>
						<view class="commet-container" v-show="blog.comments.length!=0">
							<view class="commet-item" v-for="(comment,i) in blog.comments" :key="i">
								<view class="comment-name">
									<view class="who" @tap="toOtherPage(comment.deliverId)">{{comment.deliverName}}</view>
									<view class="response" v-show="comment.fatherId!=-1">回复</view>
									<view class="to-who" @tap="toOtherPage(comment.fatherId)" v-show="comment.fatherId!=-1">{{comment.fatherName}}</view>
									<view class="colon">:</view>
								</view>
								<view class="comment-content" @longpress="deleteComment(index,i)" @tap="reply(index,comment.deliverId,comment.deliverName)">{{comment.content}}</view>
							</view>
						</view>
					</view>
					<view class="divider"></view>
				</view>
				
				<view>
					{{hasNextPage?'正在加载...':'已经加载全部'}}
				</view>
				
					<!-- 评论输入框 -->
				<view class="comment-input" v-show="commentAble">
					<textarea v-model="commemtMsg" @keyup="checkText()"  :placeholder="placeholder" maxlength="60" :adjust-position='true'></textarea> 
					<button class="green" v-show="commemtMsg!=''&&commemtMsg!=' '" @tap="postComment()">确定</button>
					<button @tap="closeComment()">取消</button>
				</view>

				
			</view>
		</view>
	</view>
</template>

<script>
	import dateUtil from 'util/date';
	import {getBlogById,findPerson,getLikes,likeBlog,getComments,commentBlog,deleteComment} from '@/api/user.js'
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				userId:-1,
				pageNum:0,  //默认页数是0
				hasNextPage:true, //是否有下一页
				blogs:[],    ///说说
				pageSize:8,   //分页大小
				commemtMsg:'',
				commentAble:false, //控制发送键能够按下
				replyTo:{  //回复谁
					id:-1,
					name:''
				},
				blogIndex:-1, //待评论的说说索引
				placeholder:'',
				userInfo:{}
			}
		},
		onLoad(options) {
			this.userId = options.id;
			this.getUserinfo();
			this.getBlogs();
		},
		computed:{
			...mapGetters(['user','token','worldBg'])
		},
		onPullDownRefresh() {
			this.blogs = [];
			this.pageNum = 0;
			this.hasNextPage = true;
			this.getBlogs();
			this.closeComment();
			uni.showToast({
				title:'刷新成功！',
				icon:'success'
			})
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},300)
		},
	
		onNavigationBarButtonTap: (button) => {
			if(button.index==0){
				uni.navigateTo({
					url:'../edit/edit',
					animationType:'slide-in-right',
				})
			}
		},
		onReachBottom() {
			this.getBlogs();
		},
		methods: {
			//更换背景
			toChangeBg(){
				uni.navigateTo({
					url:'../changeBg/changeBg',
					animationType:'slide-in-right'
				})
			},
			async deleteCommentPost(blogIndex,commentIndex){
				let id = this.blogs[blogIndex].comments[commentIndex].id;
				if(id==null||id==undefined||id==''){
					uni.showToast({
						title:'请刷新后再执行此操作！',
						icon:'none'
					})
					return;
				}
				let that = this;
				const { content: res } = await deleteComment({
					token:that.token,
					commentId:that.blogs[blogIndex].comments[commentIndex].id
				})
				this.blogs[blogIndex].comments.splice(commentIndex,1);
				uni.showToast({
					title:res,
					icon:'success'
				})
			},
			deleteComment(blogIndex,commentIndex){
				if(this.blogs[blogIndex].owner!=this.user.id&&this.blogs[blogIndex].comments[commentIndex].deliverId!=this.user.id)	return;
				let that = this;
				 uni.showModal({
					title:'提示',
					content:'是否删除这条评论',
					confirmText:'确定',
					confirmColor:'#D94B4D',
					cancelText:'取消',
					success: (res) => {
						if(res.confirm){
							that.deleteCommentPost(blogIndex,commentIndex);
						}
					}
				})
			},
			toPersonInfo(){
				uni.navigateTo({
					url:'/pages/other/search/info?id='+this.userId+'&from=group',
					animationType:'slide-in-right'
				})
			},
			toOtherPage(id){
				if(id==this.user.id) return;
				else{
					uni.navigateTo({
						url:'other/other?id='+id,
						animationType:'slide-in-right'
					})
				}
			},
			async getUserinfo(){
				const { content: res } = await findPerson({
					id:this.userId
				});
				uni.setNavigationBarTitle({
					title:res.nickname+'的世界'
				})
				this.userInfo = res;
			},
			reply(index,id,name){
				this.blogIndex = index;
				this.replyTo.id = id;
				this.replyTo.name = name;
				this.placeholder = '回复'+name+'...';
				this.commentAble = true;
			},
			async postComment(){
				if(this.blogIndex==-1)	return;
				const { content: res } = await commentBlog({
					token:this.token,
					blogId:this.blogs[this.blogIndex].id,
					fatherId:this.replyTo.id,
					fatherName:this.replyTo.name,
					deliverName:this.user.nickname,
					content:this.commemtMsg,
					time:dateUtil.getTimeNow()
				});
				let comment = {
					token:this.token,
					blogId:this.blogs[this.blogIndex].id,
					fatherId:this.replyTo.id,
					fatherName:this.replyTo.name,
					deliverName:this.user.nickname,
					deliverId:this.user.id,
					content:this.commemtMsg,
					time:dateUtil.getTimeNow()
				}
				this.blogs[this.blogIndex].comments.push(comment);
				uni.showToast({
					title:res,
					icon:'success'
				})
				this.closeComment();
			},
			checkText(){
				// #ifdef H5
				this.commemtMsg = this.commemtMsg.replaceAll('  ',' ');
				// #endif
				//#ifdef APP-PLUS
				this.commemtMsg = this.commemtMsg.replace('  ',' ');
				//#endif
				if(this.commemtMsg.length>50){
					uni.showToast({
						title:'最多50个字哦~',
						icon:'none'
					})
					this.commemtMsg = this.commemtMsg.substring(0,50);
				}
			},
			closeComment(){
				this.commentAble = false;
				this.blogIndex = -1;
				this.commemtMsg = '';
				this.replyTo = {
					id:-1,
					name:''
				};
			},
			commentBlog(index){
				this.blogIndex  = index;
				this.commentAble = true;
				this.placeholder = '评论'+this.blogs[index].name+'...';
			},
			//给说说点赞
			async likeBlog(index){
				if(this.blogs[index].likes.includes(this.user.id.toString())||this.blogs[index].likes.includes(this.user.id)){
					uni.showToast({
						title:'你已经点过赞啦~',
						icon:'none'
					})
					return;
				}
				const { content: res } = await likeBlog({
					token:this.token,
					blogId:this.blogs[index].id
				});
				this.blogs[index].likes.push(this.user.id);
				uni.showToast({
					title: res,
					icon:'success'
				})
				
			},
			showTime(time){
				let days = dateUtil.TimeDifference(time,dateUtil.getTimeNow());
				if(days==0){
					let seconds = dateUtil.TimeDifferenceSeconds(time,dateUtil.getTimeNow());
					if(seconds<60) return seconds+'秒前';
					if(seconds<3600){
						return Math.floor(seconds/60)+'分钟前';
					}
					if(seconds<86400){
						return Math.floor(seconds/3600)+'小时前'
					}
				}
				if(days==1)	return '昨天';
				if(days==2) return '前天';
				if(days<365) return time.substr(5,11);
				return time.substr(0,16);
			},
			//获取我的说说
			async getBlogs(){
				if(!this.hasNextPage){
					uni.showToast({
						title:'已加载了TA的全部说说',
						icon:'none'
					})
					return;
				}
				const { content: res } = await getBlogById({
					 userId:this.userId,
					 pageNum:this.pageNum+1
				 });
				
				 if(res.total===0){
					 this.hasNextPage = false;
					 return;
				 }
				if(this.pageSize*(res.current-1)<res.total&&this.pageSize*res.current>=res.total){
					this.hasNextPage = false;
				}else{
					this.pageNum++;
				}
				
				let records = res.records;
				for(let i=0;i<records.length;i++){
					const { content: res1 } = await findPerson({
						id:records[i].owner
					});	
					const { content: res2 } = await getLikes({
						blogId:records[i].id
					});	
					const { content: res3 } = await getComments({
						blogId:records[i].id
					});	
					let images = [];
					images =  records[i].images==''?[]:records[i].images.substr(0,records[i].images.length-1).split(',');
					let blog = {
						id:records[i].id,
						name:res1.nickname,
						owner:records[i].owner,
						avatar:res1.avatar,
						content:records[i].content,
						time:records[i].time,
						comments:res3,
						images: images,
						likes:res2
					}
					this.blogs.push(blog);
				}
				
			},
			
			// 预览图片
			showPic(url,index) {
				uni.previewImage({
					indicator: 'none',
					current:url,
					urls:this.blogs[index].images
				});
			},
		}
	}
</script>

<style scoped>
	.delete-icon{
		color: red;
	}
	.comment-content{
		margin-left: 50rpx;
		margin-right: 20rpx;
		font-size: 25rpx;
	}
	.commet-item{
		display: inline-flexbox;
	}
	.comment-name .colon{
		margin-right: 20rpx;
	}
	.comment-name .to-who{
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.comment-name .response{
		margin-right: 5rpx;
	}
	.comment-name .who{
		margin-right: 5rpx;
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.comment-name{
		display: flex;
		font-size: 25rpx;
	}
	.commet-container{
		margin-right: 30rpx;
		margin-top: 20px;
		background-color: #eaeaea;
		padding: 10rpx;
		border-radius: 5rpx;
	}

	.icon-image{
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}
	.tip{
		height: 20rpx;
		margin-top: 30rpx;
		position: relative;
	}
	.tip .time{
		position: absolute;
		color: dimgray;
		font-size: 20rpx;
	}
	.tip .options{
		position: absolute;
		right: 50rpx;
		display: flex;
	}
	.images{
		display: grid;
		grid: 210rpx / auto auto auto;
	}
	.image-item{
		border-radius: 10rpx;
		width: 90%;
		height: 200rpx;
		margin-top: 20rpx;
		margin-right: 5rpx;
	}
	.name{
		font-weight: 900;
		color: rgb(92,113,153);
	}
	.item{
		border-bottom: lightgrey 1rpx solid;
		display: flex;
		margin-bottom: 60rpx;
		padding-bottom: 60rpx;
	}
	.text{
		font-weight: 500;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		border-radius: 20rpx;
		margin-right: 50rpx;
		font-size: 30rpx;
		word-break:break-all;
	}
	.item-avatar{
		right: 10rpx;
		border-radius: 20rpx;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
	}
	.item .left{
		position: relative;
		width: 18%;
	}
	.item .right{
		width: 82%;
		margin-right: 20rpx;
	}
	.avatar{
		border-radius: 30rpx;
		width: 140rpx;
		height: 140rpx;
		position:absolute;
		z-index: 10;
		right: 20rpx;
		bottom: 0;
	}
	.username{
		color: white;
		font-size: 35rpx;
		font-weight: 600;
		position:absolute;
		z-index: 10;
		right: 170rpx;
		bottom: 70rpx;
	}
.bg-image{
	position:relative;
	border-radius: 10rpx;
	width: 100%;
	height: 400rpx;
	/* height: 100%; */
}
.bg-container{
	position:relative;
	border-radius: 10rpx;
	width: 100%;
	height: 465rpx;
	/* height: 100%; */
}
.wrapper{
	background-color: white;
}		
	.comment-input{
		width: 90%;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: whitesmoke;
		position: fixed;
		bottom: 0;
		margin: 20rpx;
		display: block;
		align-items: center;
	}
	.comment-input button{
		background-color: royalblue;
		color: aliceblue;
		width: 100%;
		height: 80rpx;
		margin-top: 20rpx;
		text-align: center;
	}
	.comment-input textarea{
		height: 200rpx;
	}
	.green{
		background-color: seagreen !important;
	}	
</style>
